<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app1">
      {{msg | capitalize | appendSuffix(' React',' Vue') }}
    </div>
    <div id="app2">
      {{msg | capitalize }}
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script>
      //调用filter方法可以注册一个全局的过滤器，第1参数是过滤器的名称，第2个参数是过滤器的处理函数
      Vue.filter('capitalize',function(value){
        return value.charAt(0).toUpperCase()+value.slice(1);
      });
      var vm1 = new Vue({
        el: "#app1",
        data:{msg:'hello'},
        filters:{//局部过滤器，定义了以后只能在当前实例中使用
          //过滤器函数第1个参数是等待转换的老值，后面的参数是使用的时候传过来
          appendSuffix(value,suffix1,suffix2){
            return value+suffix1+suffix2;
          }
        }
      });
      var vm2 = new Vue({
        el: "#app2",
        data:{msg:'hello'}
      });
    </script>
  </body>
</html>
